<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="css/animate1.min.css">
	<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="//at.alicdn.com/t/font_2891829_w4h17j62fwp.css">
	<script src="js/nav.js"></script>
</head>

<body>
	<div class="nav">
		<div class="logo">
			<div class="logoImg"><img src="imgs/logo.png" alt="草方格·Square"></div>
			<div class="logoText">草方格·Square</div>
		</div>
		<div class="search">
			<div class="searchInput">
				<div class="searchBtn">
					<div class="text">商品</div>
					<div class="icon iconfont icon-xiangxia"></div>
				</div>
				<div class="input">
					<div class="icon iconfont icon-sousuo"></div>
					<input type="text" placeholder="请输入搜索的艺术品、专辑或艺术家">
				</div>
			</div>
		</div>
		<div class="navList">
			<div class="navItem">商城</div>
			<div class="navItem icon iconfont icon-renzheng"></div>
			<div class="navItem icon iconfont icon-qianbao"></div>
			<div class="navItem icon iconfont icon-bangzhu"></div>
		</div>
	</div>




	<div class="swiper-container">
		<div class="swiper-wrapper">
			<div class="swiper-slide">
				<video src="imgs/video1.mp4" autoplay muted loop></video>
			</div>
			<div class="swiper-slide">
				<video src="imgs/video2.mp4" autoplay muted loop></video>
			</div>
		</div>
		<!-- 如果需要分页器 -->
		<div class="swiper-pagination"></div>

		<!-- 如果需要导航按钮 -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>

		<!-- 如果需要滚动条 -->
		<!-- <div class="swiper-scrollbar"></div> -->

		<!-- 轮播中间放置内容 -->
		<div class="swiperMain">
			<h1>Square</h1>
			<h3>让价值自由流通</h3>
			<p>
				<span>潮流</span><span>音乐</span><span>域名</span><span>虚拟世界</span><span>收藏品</span><span>交易卡</span>
			</p>
			<div class="swiperBtn">
				<div class="publishBtn wow bounceInLeft">
					<span class="iconfont icon-fabusekuai"></span>
					<span class="txt">发布NFT</span>
				</div>
				<div class="supermarkBtn wow bounceInRight">
					<span class="iconfont icon-caidan"></span>
					<span class="txt">浏览商城</span>
				</div>
			</div>
		</div>
	</div>

	<div class="goodness">
		<h2>优势</h2>
		<div class="goodList">
			<div class="goodItem wow shake">
				<img src="imgs/net.png" alt="">
				<div class="title">作品众多</div>
				<div class="desc">拥有独家NFT作品，众多前卫创作者，作品分类涵盖范围广。</div>
			</div>
			<div class="goodItem wow flip">
				<img src="imgs/secure.png" alt="">
				<div class="title">安全可信</div>
				<div class="desc">依托司法链与区块链溯源，作品铸造链上留痕，来源可溯，记录可查，版权可信。</div>
			</div>
			<div class="goodItem wow shake">
				<img src="imgs/fear.png" alt="">
				<div class="title">费用更低</div>
				<div class="desc">发行手续费低于行业平均水平；NFT作品交易佣金比例低。</div>
			</div>
			<div class="goodItem wow flip">
				<img src="imgs/clock.png" alt="">
				<div class="title">铸造更快</div>
				<div class="desc">流程操作更便捷，作品生成更迅速。</div>
			</div>
		</div>
	</div>

	<div class="course">
		<h2>教程</h2>
		<div class="courseList">
			<div class="courseItem wow zoomInLeft">
				<img src="imgs/banner1.png" alt="">
				<h3>发布艺术品教程</h3>
				<p>上传您的作品（图像、视频、音频或3D艺术），添加标题和描述，并自定义您的 NFT，包括属性、统计数据和可解锁的内容</p>
			</div>
			<div class="courseItem wow zoomInDown">
				<img src="imgs/banner2.png" alt="">
				<h3>创建账号教程</h3>
				<p>创建平台账号，提交身份资料，进行身份认证，目前平台提供个人身份及企业身份认证，个人身份认证</p>
			</div>
			<div class="courseItem wow zoomInRight">
				<img src="imgs/banner3.png" alt="">
				<h3>购买艺术品教程</h3>
				<p>了解商品的拍卖和购买流程，帮您完成购买心仪的艺术品的愿望。</p>
			</div>
		</div>
	</div>

	<div class="friend">
		<h2>合作伙伴</h2>
		<div class="friends">
			<img class="wow slideInLeft" src="imgs/friend1.png" alt="">
			<img class="wow slideInLeft" src="imgs/friend2.png" alt="">
			<img class="wow slideInRight" src="imgs/friend3.png" alt="">
			<img class="wow slideInRight" src="imgs/friend4.png" alt="">
		</div>
	</div>

	<div class="footer">
		© 2020-2025 老陈打码 All Rights Reserved.
		<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">粤ICP备18085059号</a>
	</div>
	<div class="zhezhao">
		<div class="loginContent">
			<div class="close">X</div>
		</div>
	</div>
	<script src="js/login.js"></script>
	<script src="js/lcSwiper.js"></script>
	<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
	<!-- <script src="https://unpkg.com/swiper/swiper-bundle.min.js"> </script> -->
	<script>
		var mySwiper = new Swiper('.swiper-container', {
			//direction: 'vertical', // 垂直切换选项
			loop: true, // 循环模式选项

			// 如果需要分页器
			pagination: {
				el: '.swiper-pagination',
			},

			// 如果需要前进后退按钮
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			},

			// 如果需要滚动条
			// scrollbar: {
			// 	el: '.swiper-scrollbar',
			// },
		})
	</script>
	<script src="js/wow.min.js"></script>
	<script>
		new WOW().init();
	</script>
</body>

</html>